import React,{Component} from 'react';
import {
  Link
} from 'react-router-dom';
import { addUserAddress, getAreaInfo } from 'api/user.js';
import './addAddress.scss';
import { message } from 'antd';
export default class AddAddresss extends Component{
	constructor(props){
    super(props)
    this.state = {
    	detail_area:'',
    	province_id:'',
    	city_id:'',
    	township_id:'',
    	phone:'',
    	is_default:0,
    	contact_name:'',
    	adr:'glyphicon-nochecked',
    	color:'',
    	pid:0,
    	address:[],
    	addr_name:'请选择 所在省 所在市 所在区',
    	province: '请选择',
    	pr_id:'',
    	city: '',
    	ci_id:'',
    	township: '',
    	to_id:'',
    	color1:'color',
    	color2:'',
    	color3:'',
    	hide:'card_hide'
    }
  }
  show = () => {
  	this.setState({
  		hide:''
  	})
  }
  hide = () => {
  	this.setState({
  		hide:'card_hide',
  		addr_name:this.state.province+this.state.city+this.state.township
  	})
  }
  _addUserAddress = () => {
  	this.setState({
			is_default:this.state.color ==='active' ? 1 : 0
		}, ()=>{
			this._AddUserAddress()
		})
  }
	_AddUserAddress = () => {
    addUserAddress({
      detail_area: this.state.detail_area,
    	province_id: this.state.province_id,
    	city_id: this.state.city_id,
    	township_id: this.state.township_id,
    	phone: this.state.phone,
    	is_default: this.state.is_default,
    	contact_name:this.state.contact_name,
    	has:true
    }).then(res => {
      if (res.code === 1) {
        message.success('新增地址成功！', 3, this.props.history.push('/user/shipAddress'))
      } else {
      	message.error(res.message, 3)
      }
    })
  }
  handleChange = (e) => {
    let key = e.target.name
    this.setState({[key]: e.target.value})
  }
  click = () => {
		this.setState({
			adr:this.state.adr==='glyphicon-nochecked' ? 'glyphicon-checked active' : 'glyphicon-nochecked',
			color:this.state.color=== '' ? 'active' : ''
		})
	}
	_getAreaInfo (id,name,tier,pa_id) {
		getAreaInfo({
			pid:id
		}).then(res => {
      if (res.code === 1) {
        this.setState({
          address: res.data.info,
          has: res.data.has_last
        })
      }
    })
    	if(tier===1){
	    	this.setState({
		    	province:name,
		    	pr_id:pa_id,
		    	city: '请选择',
		    	color1: '',
		    	color2: 'color',
		    	province_id:id
		    })
	    }else if(tier===2){
	    	this.setState({
		    	city:name,
		    	ci_id:pa_id,
		    	township: this.state.has ? '请选择' : '',
		    	color2: '',
		    	color3: 'color',
		    	city_id:id
		    })
		  }else if(tier===3 ){
		  	this.setState({
		    	township:name,
		    	to_id:pa_id,
		    	color3: '',
		    	township_id:id
		    })
		  }
	}
	change (sum) {
		getAreaInfo({
			pid:sum
		}).then(res => {
      if (res.code === 1) {
      	 this.setState({
          address: res.data.info,
          has: res.data.has_last
        })
      }
		})
	}
  componentWillMount () {
		this._getAreaInfo()
	}
	render(){
		return(
			<div>
				<div className="edit">
					<Link to='/user/shipAddress'><span className="glyphicon glyphicon-back back"></span></Link>
					<div className="log_title">新增地址</div>
				</div>
				<div className="address_content">
					<p onClick={this.show}><span className="glyphicon glyphicon-address xz"></span>{this.state.addr_name}<span className="glyphicon glyphicon-right xz1"></span></p>
					<p><span>详细地址：</span><input type="text" placeholder="请输入详细地址" name="detail_area" value={this.state.detail_area} onChange={this.handleChange}/></p>
					<p><span>收件人：</span><input type="text" placeholder="请输入姓名" name="contact_name" value={this.state.contact_name} onChange={this.handleChange}/></p>
					<p><span>手机号：</span><input type="text" placeholder="请输入手机号" name="phone" value={this.state.phone} onChange={this.handleChange}/></p>
				</div>
				<div className="mr">
	        <p className={`glyphicon  ${this.state.adr}`}  onClick={this.click}></p><p className={this.state.color} onClick={this.click}>默认地址</p>
	      </div>
	      <div className="add" onClick={this._addUserAddress}>
					保存地址
				</div>
				<div className={`addr ${this.state.hide}`}>
					<div>
						<p>选择地址</p><span className="glyphicon glyphicon-closeaddr" onClick={this.hide}></span>
						<div className="address1">
							<span className={this.state.color1} onClick={this.change.bind(this,this.state.pr_id)}>{this.state.province}</span>
							<span className={this.state.color2} onClick={this.change.bind(this,this.state.ci_id)}>{this.state.city}</span>
							<span className={this.state.color3}>{this.state.township}</span>
						</div>
						<ul>
							{
								this.state.address.map((itme,index) => {
									return(
										<li key={index} onClick={this._getAreaInfo.bind(this,itme.district_id,itme.district_name,itme.district_is_leaf,itme.district_parent_id)}>{itme.district_name}</li>
									)
								})
							}
						</ul>
					</div>
				</div>
			</div>
		)
	}
}